<template>
  <el-dialog :model-value="visible" width="600" @close="cls">
    <el-form :model="detailed" label-width="150px">
      <el-form-item label="ID:">
        <el-input
          v-model="detailed.id"
          autocomplete="off"
          style="width: 300px"
          disabled
        />
      </el-form-item>
      <el-form-item label="货代公司名称:">
        <el-input
          v-model="detailed.companyName"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="联系人:">
        <el-input
          v-model="detailed.name"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="联系方式:">
        <el-input
          v-model="detailed.mobile"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="邮箱:">
        <el-input
          v-model="detailed.email"
          autocomplete="off"
          placeholder="请输入"
          style="width: 300px"
        />
      </el-form-item>
      <el-form-item label="创建时间:">
        <el-input
          v-model="detailed.createTime"
          autocomplete="off"
          style="width: 300px"
          disabled
        />
      </el-form-item>
    </el-form>
    <div class="dialog-footer">
      <el-button type="primary" @click="save"> 提交 </el-button>
      <el-button @click="cls">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { updateForwById, getForwById } from "@/api/system/forw.js";

// 声明事件
const emits = defineEmits(["close2", "refresh2"]);

// 定义属性
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  fid: {} // 接收父组件传递的 sid
});

// 方法
function cls() {
  // 通知父组件关闭对话框
  emits("close2");
}

const detailed = ref({
  id: "",
  companyName: "",
  name: "",
  mobile: "",
  email: "",
  createTime: ""
});

async function save() {
  let res = await updateForwById(detailed.value);
  if (res.code == 200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    // 通知父组件刷新数据
    emits("refresh2");
    cls();
  } else {
    ElMessage({
      message: "保存失败",
      type: "error"
    });
  }
}

async function getForw() {
  detailed.value.id = props.fid; // 使用 props.sid 获取传递的 sid
  let res = await getForwById(detailed.value);
  detailed.value = res.data;
}

// 监听 visible 属性，当 visible 为 true 时，获取数据
watch(
  () => props.visible,
  async newVal => {
    if (newVal) {
      if (props.fid) {
        console.log("props.sid>>>>", props.fid);

        await getForw(); // 当对话框显示并且 sid 有值时，获取数据
      }
    }
  }
);
</script>

<style scoped>
.dialog-footer {
  width: 150px;
  display: flex;
  justify-content: space-between;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>
